<!DOCTYPE html>
<html lang="en">

<head>
    {include file="common/meta" /}
    <link rel="stylesheet" href="__CDN__/static/style/detail.css" />
</head>

<body>
<div id="app">
    <!-- 头部 -->
    {include file="common/head" /}

    <!-- 内容 -->
    <el-row :gutter="50" type="flex" justify="center" class="product-image">
        <el-col :xs="24" :sm="24" :md="15">
            <el-row :gutter="50" class="hidden-md-down">
                <el-col :span="productImages.length > 1 ? 12 : 24" v-for="(item, index) in productImages" :key="index" :style="(index > 1 ? 'margin-top: 1vw;' : '') + 'text-align: center'">
                    <img :src="item.image" alt="" style="height: 29vw;" />
                </el-col>
            </el-row>
            <el-row class="hidden-md-up">
                <el-col :span="24">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">{{ i18n[lang].homePage }}</el-breadcrumb-item>
                        {if $row.series}
                        <el-breadcrumb-item><a href="{:url('products/index',['series_id'=>$row.series.id])}">{$row.series.name}</a></el-breadcrumb-item>
                        {/if}
                        {if $row.category}
                        <el-breadcrumb-item><a href="{:url('products/index',['category_id'=>$row.category.id])}">{$row.category.name}</a></el-breadcrumb-item>
                        {/if}
                        <el-breadcrumb-item>{{ i18n[lang].productDetail }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
                <el-col :span="24" class="m-t-10">
                    <el-carousel :interval="4000" type="card" height="200px">
                        <el-carousel-item v-for="(item, index) in productImages" :key="index">
                          <img :src="item.image" alt="" />
                        </el-carousel-item>
                      </el-carousel>
                </el-col>
            </el-row>
        </el-col>
        <el-col :xs="24" :sm="24" :md="9">
            <el-row class="p-s t-50">
                <el-col :span="24">
                    <el-breadcrumb separator="/" class="hidden-md-down">
                        <el-breadcrumb-item :to="{ path: '/' }">{{ i18n[lang].homePage }}</el-breadcrumb-item>
                        {if $row.series}
                        <el-breadcrumb-item><a href="{:url('products/index',['series_id'=>$row.series.id])}">{$row.series.name}</a></el-breadcrumb-item>
                        {/if}
                        {if $row.category}
                        <el-breadcrumb-item><a href="{:url('products/index',['category_id'=>$row.category.id])}">{$row.category.name}</a></el-breadcrumb-item>
                        {/if}
                        <el-breadcrumb-item>{{ i18n[lang].productDetail }}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-link type="info" :href="'/detail'" :underline="false" class="m-t-35">
                        {$row.series.name}
                    </el-link>
                    <p class="text-black f-s-48 l-h-70">{$row.category.name}</p>
                    <h1>{$row.name}</h1>
                    <el-collapse v-model="activeNames" @change="handleChange">
                        <el-collapse-item :title="i18n[lang].selectColor" name="1">
                            <el-radio v-for="(item, index) in colorData" :key="index" v-model="radioColor" :label="item" border>{{ item }}</el-radio>
                        </el-collapse-item>
                        <el-collapse-item :title="i18n[lang].selectSize" name="2">
                            <el-radio v-for="(item, index) in sizeData" :key="index" v-model="radioSize" :label="item" border>{{ item }}</el-radio>
                        </el-collapse-item>
                    </el-collapse>
                    <el-button type="primary" class="w-100p b-radius-0" @click="openUrl">{{ price }}</el-button>
                    <p class="m-t-60 f-s-18">{{ i18n[lang].description }}</p>
                    <p class="m-t-30 f-s-14 l-h-30">
                       {$row.content}
                    </p>
                </el-col>
                <el-col :span="24">
            </el-row>
        </el-col>
    </el-row>
    <!-- 轮播图 -->
    <p class="f-s-48 l-h-70 text-center f-w-300 m-t-60">{{ i18n[lang].interested }}</p>
    <div class="swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper m-t-30">
            <!-- Slides -->
            <div v-for="(item, index) in slides" class="swiper-slide">
                <el-link :href="item.href" :underline="false" class="noline">
                    <img :src="item.image" :alt="item.title" />
                </el-link>
            </div>
        </div>
        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <!-- 底部 -->
    {include file="common/foot" /}
</div>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                i18n: {
                    "zh-cn": {
                        "homePage": "首页",
                        "productDetail": "产品详情",
                        "description": "描述及细节",
                        "interested": "您可能感兴趣的作品",
                        "selectColor": "确定适合您的颜色",
                        "selectSize": "确定适合您的尺寸",
                        "selectColorSize": "请选择颜色和尺寸",
                    },
                    "en": {
                        "homePage": "Home",
                        "productDetail": "Product Detail",
                        "description": "Description",
                        "interested": "Works That You May Be Interested In",
                        "selectColor": "Select Color",
                        "selectSize": "Select Size",
                        "selectColorSize": "Please Select Color And Size",
                    }
                },
                lang: "{$lang == 'en' ? 'en' : 'zh-cn'}",
                activeIndex: "1",
                isMenuOpen: false,
                drawer: false,
                menuItems: [
                    {include file="common/head_js" /}
                ],
                productImages: [
                    {volist name="$row.images" id="vo"}
                    { image: "{$vo|cdnurl}", title: "{$row.name}" },
                    {/volist}
                ],
                activeNames: ["1"],
                radioColor: "",
                radioSize: "",
                colorData: [],
                sizeData: [],
                price: '',
                url: '',
                specPrices: {$spec_prices|json_encode},
                // 轮播数据
                slides: [
                    {volist name="$xgProducts" id="vo"}
                    { image: "{$vo.image|cdnurl}", href: "{:url('/index/products/show',['id'=>$vo.id])}", title: "{$vo.name}" },
                    {/volist}
                ],
                footerList: [
                    {include file="common/foot_js" /}
                ]
            };
        },
        created() {
            console.log('specPrices:', this.specPrices);
            Object.entries(this.specPrices).forEach(([key, value]) => {
                this.colorData.push(key);
            });
            this.radioColor = this.colorData[0]
            this.price = this.i18n[this.lang].selectColorSize
        },
        mounted() {
            this.initSwiper();
        },
        watch: {
            radioColor(val) {
                this.sizeData = [];
                Object.entries(this.specPrices[val]).forEach(([key, value]) => {
                    this.sizeData.push(key);
                });
                this.radioSize = this.sizeData[0];
            },
            radioSize(val) {
                this.price = this.specPrices[this.radioColor][val].price;
                this.url = this.specPrices[this.radioColor][val].url;
            },
        },
        methods: {
            initSwiper() {
                const that = this
                const swiper = new Swiper(".swiper", {
                    slidesPerView: 1,
                    spaceBetween: 100,
                    breakpoints: {
                        // when window width is >= 992px
                        992: {
                            slidesPerView: 4,
                            spaceBetween: 20
                        }
                    },
                    direction: 'horizontal',
                    autoHeight: true,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev",
                    },
                });
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleChange(val) {
                console.log(val);
            },
            openUrl() {
                window.open(this.url, '_blank');
            }
        },
    });
</script>
</body>
</html>